<template>
  <div ref="echartId" :style="{height:height,width:width}"></div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'BarChart',
  props: {
    title: {
      type: String,
      default: ""
    },
    x_data:{
      type: Array,
      default: () => []
    },
    access_time:{
      type: Array,
      default: () => []
    },
    work_time:{
      type: Array,
      default: () => []
    },
    width: {
      type: String,
      default: '80%'
    },
    height: {
      type: String,
      default: '340px'
    }
  },
  data() {
    return {
      chart: null,
      chartData: {
        title: {
            text: this.title
        },
        legend: {
          data: ['接近工时', '工作工时']
        },
        toolbox: {                   
		      show: true,                  
		      feature: {                     
			      dataZoom:{                        
				      realtime: false,                         
				      yAxisIndex: 'none',                      
			      },                    
			      restore: {},                   
		      }            
	      },          
        tooltip: {},
        xAxis: {
            data: this.x_data
        },
        yAxis: {},
        series: [{
            name: '接近工时',
            type: 'bar',
            stack: 'one',
            // label: {
            //     normal: {
            //         show: true,
            //         position: 'top'
            //     }
            // },
            areaStyle:{color: "#cff4a4"},
            data: this.access_time
        },
        {
            name: '工作工时',
            type: 'bar',
            stack: 'one',
            // label: {
            //     normal: {
            //         show: true,
            //         position: 'top'
            //     }
            // },
            areaStyle:{color: "#cff4a4"},
            data: this.work_time
        }]
      }
    }
  },
  watch:{
    chartData: {
      deep: true,
      handler (val) {
        this.chart.setOption(val)
      }
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart () {
      this.chart = echarts.init(this.$refs.echartId)
      this.chart.setOption(this.chartData)
    }
  }
}
</script>

<style scoped>

</style>
